<template>
  <div class="wrapper" ref="xx" v-if="true">
    <ul class="content">
      <li v-for="(item, index) in items" :key="index" :class="{ algin: algin }">
        <div>
          <div></div>
          <img :src="item.sPicUrl" alt="" :width="imgwidth" @load="load" />
        </div>
        <p>{{ item.name }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
// import BScroll from "@better-scroll/core";
export default {
  props: {
    items: {
      default: () => [],
    },
    classname: {
      type: String,
      default: "",
    },
    imgwidth: {
      type: String,
      default: "50",
    },
    algin: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      w: "",
      show: false,
    };
  },
  created() {},
  watch: {
    items: {
      handler: function (a) {
        if (a.length > 0) {
          this.show = true;
          this.add();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    load() {
      this.$nextTick(function () {
        this.items.forEach((element) => {
          this.w.refresh();
        });
      });
    },
    add() {
      this.$nextTick(function () {
        this.w = this.BetterScroll(this.$refs.xx, {
          scrollX: true,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  .content {
    display: inline-block;
    .algin {
      width: 30vw;
      vertical-align: text-top;
      img {
        width: 100%;
      }
      p {
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        /* 弹性伸缩盒子模型显示 */
        display: -webkit-box;
        /* 限制在一个块元素显示的文本的行数 */
        -webkit-line-clamp: 2;
        /* 设置或检索伸缩盒对象的子元素的排列方式 */
        -webkit-box-orient: vertical;
      }
      text-align: left;
    }
    li {
      display: inline-block;
      padding: 3vw 2vw;
      text-align: center;
    }
  }
}
</style>